<script setup>
import { inject, ref } from "vue";
import newsMain from "@/dicts/news/newsMain.json";
import emitter from "@/utils/mitt.js";
import { getArticleList } from "@/api/article.js";
import carouselCompo from "@/components/carousel/carousel.vue";

const getAssetsFile = inject("getAssetsFile");

const changePath = (path, query = null) => {
	emitter.emit("changePath", {
		path: path,
		query: query,
	});
};

const newCarouselList = ref([]);
const industryList = ref([]);
const noticeList = ref([]);
const searchParamIndustry = ref({
	articleColumnId: 6,
	isView: 1,
});
const searchParamNotice = ref({
	articleColumnId: 7,
	isView: 1,
});
const getIndustryList = async () => {
	const params = {
		...searchParamIndustry.value,
		pageNum: 1,
		pageSize: 10,
	};
	const res = await getArticleList(params);
	try {
		if (res.data.code === 200) {
			// 如果数量足够则取前7条数据
			industryList.value = res.data.data.records.slice(0, 7);
		} else {
			console.log(res.data.msg);
		}
	} catch (e) {
		console.log(e);
	}
};
const getNoticeList = async () => {
	const params = {
		...searchParamNotice.value,
		pageNum: 1,
		pageSize: 10,
	};
	const res = await getArticleList(params);
	try {
		if (res.data.code === 200) {
			noticeList.value = res.data.data.records;
		} else {
			console.log(res.data.msg);
		}
	} catch (e) {
		console.log(e);
	}
};
getIndustryList();
getNoticeList();
</script>

<template>
	<div class="pageContent">
		<!--行业资讯-->
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>行业资讯</div>
			</n-h6>
			<n-button text :color="'#999'" @click="changePath('/index/news/industry')"> 查看更多>> </n-button>
		</n-space>
		<n-grid :cols="5" :x-gap="0" :y-gap="0" style="margin-bottom: 30px">
			<n-gi :span="3">
				<!--<n-carousel
					class="industryCarousel"
					:dot-placement="'top'"
					draggable
					show-arrow
					:autoplay="true"
					centered-slides
				>
					<div v-for="item in newCarouselList" class="flex flex_column" style="height: 100%">
						<img
							:src="getAssetsFile(item.img)"
							style="width: 100%; cursor: pointer; object-fit: cover;"
							alt=""
						/>
						<n-ellipsis
							class="carouselText spaceItem"
							:tooltip="false"
							style="width: calc(100% - 40px)"
						>
							{{ item.title }}
						</n-ellipsis>
					</div>
				</n-carousel>-->
				<carousel-compo :height="'400px'" :width="'100%'"></carousel-compo>
			</n-gi>
			<n-gi :span="2">
				<div class="industryList">
					<div v-if="industryList.length > 0">
						<div class="headLine" @click="changePath(`/index/news/industry/newsDetail`, { id: industryList[0].id })">
							{{ industryList[0].title }}
						</div>
						<n-ellipsis v-if="industryList.length > 0" :line-clamp="3" :tooltip="false" style="color: #999999">
							{{ industryList[0].title }}
						</n-ellipsis>

						<n-divider style="margin: 16px 0"></n-divider>
					</div>

					<n-grid :cols="1" x-gap="0" y-gap="20" v-if="industryList.length > 1">
						<n-gi :span="1" v-for="item in industryList">
							<div class="industryNormalItem text" style="cursor: pointer" @click="changePath(`/index/news/industry/newsDetail`, { id: item.id })">
								<n-ellipsis :tooltip="false" style="width: calc(100% - 20px)">
									{{ item.title }}
								</n-ellipsis>
							</div>
						</n-gi>
					</n-grid>
				</div>
			</n-gi>
		</n-grid>

		<!--通知公告-->
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>通知公告</div>
			</n-h6>
			<n-button text :color="'#999'" @click="changePath('/index/news/noticeList')"> 查看更多>> </n-button>
		</n-space>
		<n-grid :cols="2" :x-gap="30" :y-gap="30">
			<n-gi :span="1" v-for="item in noticeList">
				<div class="flex flex_between" style="cursor: pointer" @click="changePath(`/index/news/noticeList/newsDetail`, { id: item.id })">
					<n-ellipsis :tooltip="false" style="width: calc(100% - 80px)">
						<span class="text">
							{{ item.title }}
						</span>
					</n-ellipsis>
					<div class="time text">
						{{ item.time }}
					</div>
				</div>
				<n-divider style="margin: 16px 0 0"></n-divider>
			</n-gi>
		</n-grid>
	</div>
</template>

<style scoped>
.industryCarousel {
	height: 400px;
	background-color: rgb(221, 221, 221);
	width: 100%;
}
.industryList {
	background: #f9f9f9;
	padding: 30px;
	height: 340px;
}
.carouselText {
	position: fixed;
	bottom: 0;
	flex-grow: 1;
	color: white;
	background: rgba(0, 0, 0, 0.6);
	line-height: 36px;
	font-size: 18px;
	padding: 0 20px;
}
.headLine {
	font-size: 16px;
	color: var(--primary-color);
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	font-weight: bold;
	cursor: pointer;
	margin-bottom: 20px;
}
.industryNormalItem::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #000;
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
}
.time {
	color: #999999;
}
.text:hover {
	color: var(--primary-color);
	opacity: 0.8;
}
</style>
